<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工信息</title>
    <!-- 导入boostrap css样式-->
    <link href="resources/css/bootstrap.min.css" rel="stylesheet">
    <link href="resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body style="padding: 50px">
    <div class="container-fluid">
        <!--定义标题-->
        <h2 style="color: #8c8c8c">习题</h2>
        <!--定义一个内联的div块-->
        <div class="form-inline">
            <!--定义按钮-->
            <button type="button" class="btn btn-info" id="btn-add">新增</button>
            <button type="button" class="btn btn-info" id="btn-delete">删除</button>
            <button type="button" class="btn btn-info" id="btn-modify">编辑</button>
            <button type="button" class="btn btn-info" id="btn-select">查询</button>
            <!--定义搜索框-->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="按工号查询" id="selectById">
                <input type="text" class="form-control" placeholder="按姓名查询" id="selectByUserName">
            </div>
        </div>

        <!--增加用户模态框-->
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">添加信息</h4>
                    </div>
                    <div class="modal-body">
                        <!--定义表单-->
                        <form class="form-horizontal" role="form" id="addForm">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">工号</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="请输入四位工号" id="userId">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="请输入姓名" id="userName">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10">
                                    <select class="form-control" id="userGender">
                                        <option>男</option>
                                        <option>女</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">密码</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" placeholder="请输入密码" id="password">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">年龄</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="请输入年龄" id="userAge">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">出生日期</label>
                                <div class="col-sm-9 input-group date" id="addDatetimepicker" style="position: relative; left: 15px; width: 78%">
                                    <!--日历插件-->
                                    <input type="text" class="form-control" placeholder="请选择出生日期" id="userDate" readonly>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--定义按钮-->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="add">新增</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 删除用户模态框 -->
        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">确定删除该用户信息吗？</h4>
                        <!--定义按钮-->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="delete">删除</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑用户模态框 -->
        <div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">编辑信息</h4>
                    </div>
                    <div class="modal-body">
                        <!--定义表单-->
                        <form class="form-horizontal" role="form" id="modifyForm">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">工号</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="请输入四位工号" id="modifyUserId">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="请输入姓名" id="modifyUserName">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10">
                                    <select class="form-control" id="modifyUserGender">
                                        <option>男</option>
                                        <option>女</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">密码</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" placeholder="请输入密码" id="modifyPassword">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">年龄</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="请输入年龄" id="modifyUserAge">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">出生日期</label>
                                <div class="col-sm-9 input-group date" id="modifyDatetimepicker" style="position: relative; left: 15px; width: 78%">
                                    <!--日历插件-->
                                    <input type="text" class="form-control" placeholder="请选择出生日期" id="modifyUserDate" readonly>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--定义按钮-->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="modify">修改</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 查询用户模态框 -->
        <div class="modal fade" id="selectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">查询到的用户信息如下：</h4>
                        <!--定义表格-->
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>工号</th>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>密码</th>
                                    <th>年龄</th>
                                    <th>出生日期</th>
                                </tr>
                                </thead>
                                <tbody id="selectUserTbody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                        <!--定义按钮-->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" id="btn-selectCertain">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--定义表格-->
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>出生日期</th>
                </tr>
                </thead>
                <tbody id="userTbody">
                    <tr class="info">
                        <td><input type="checkbox"></td>
                        <td>1001</td>
                        <td>张三</td>
                        <td>女</td>
                        <td>1234</td>
                        <td>29</td>
                        <td>1991-01-01</td>
                    </tr>
                    <tr class="warning">
                        <td><input type="checkbox"></td>
                        <td>1002</td>
                        <td>李四</td>
                        <td>男</td>
                        <td>1234</td>
                        <td>28</td>
                        <td>1992-02-02</td>
                    </tr>
                    <tr class="info">
                        <td><input type="checkbox"></td>
                        <td>1003</td>
                        <td>王五</td>
                        <td>女</td>
                        <td>1234</td>
                        <td>27</td>
                        <td>1993-03-03</td>
                    </tr>
                    <tr class="warning">
                        <td><input type="checkbox"></td>
                        <td>1004</td>
                        <td>赵六</td>
                        <td>男</td>
                        <td>1234</td>
                        <td>26</td>
                        <td>1994-04-04</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 导入jquery插件、boostrap插件 -->
    <script src="resources/js/jquery-3.4.1.min.js"></script>
    <script src="resources/js/bootstrap.min.js"></script>
    <script src="resources/js/bootstrap-datetimepicker.js"></script>
    <script src="resources/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

    <script>
        /* 日历控件设置 */
        $("#addDatetimepicker").datetimepicker({
            language: "zh-CN",
            format: "yyyy-mm-dd",
            minView: 2,
            autoclose: true
        });
        $("#modifyDatetimepicker").datetimepicker({
            language: "zh-CN",
            format: "yyyy-mm-dd",
            minView: 2,
            autoclose: true
        });

        /* 添加用户 */
        $("#btn-add").click(function () {
            //alert($("#userDate").val());
            $("#addModal").modal("toggle");
            $("#add").click(function () {
                var node_count = $("#userTbody").children("tr").length;
                var userId = $("#userId").val();
                var userName = $("#userName").val();
                var userGender = $("#userGender").val();
                var password = $("#password").val();
                var userAge = $("#userAge").val();
                var userDate = $("#userDate").val();
                var tr_odd = "<tr class='info'><td><input type='checkbox'></td><td>" + userId +
                    "</td><td>" + userName + "</td><td>" + userGender + "</td><td>" + password + "</td><td>" + userAge + "</td><td>" +
                    userDate + "</td></tr>";
                var tr_even = "<tr class='warning'><td><input type='checkbox'></td><td>" + userId +
                    "</td><td>" + userName + "</td><td>" + userGender + "</td><td>" + password + "</td><td>" + userAge + "</td><td>" +
                    userDate + "</td></tr>";
                if (userId == "" || userName == "" || password == "" || userAge == "" || userDate == ""){
                    alert("添加信息不完整，无法提交！");
                }else {
                    if (node_count % 2 == 0){
                        /* 提交信息 */
                        $("#userTbody").append(tr_odd);
                        /* 隐藏模态框，并对模态框表单进行清空 */
                        $("#addModal").modal("hide");
                        $("#addForm")[0].reset();

                    }else{
                        /* 提交信息 */
                        $("#userTbody").append(tr_even);
                        /* 隐藏模态框，并对模态框表单进行清空 */
                        $("#addModal").modal("hide");
                        $("#addForm")[0].reset();
                    }
                }
            });
        });

        /* 删除用户 */
        $("#btn-delete").click(function () {
            /* 获得选中节点的个数 */
            var count = $("input[type='checkbox']:checked").length;
            /* 若有选中，则进入模态框 */
            if (count > 0){
                $("#deleteModal").modal("toggle");
                $("#delete").click(function () {
                    /* 遍历找到选中的复选框 */
                    $("input[type='checkbox']:checked").each(function () {
                        /* 找到对应复选框的行并删除该节点 */
                        $(this).parent().parent().remove();
                    });
                    /* 隐藏模态框 */
                    $("#deleteModal").modal("hide");
                });
            }else {
                alert("请选择要删除的员工信息！");
            }
        });

        /* 编辑用户 */
        $("#btn-modify").click(function () {
            /* 获得选中节点的个数 */
            var count = $("input[type='checkbox']:checked").length;
            /* 若有选中，则进入模态框 */
            if (count == 1){
                $("#modifyModal").modal("toggle");
                $("#modify").click(function () {
                    /* 遍历找到选中的复选框 */
                    $("input[type='checkbox']:checked").each(function () {
                        //alert($(this).parent().siblings().text());
                        var modify_td = $(this).parent().parent();
                        /* 获取更新后的信息 */
                        var userId = $("#modifyUserId").val();
                        var userName = $("#modifyUserName").val();
                        var userGender = $("#modifyUserGender").val();
                        var password = $("#modifyPassword").val();
                        var userAge = $("#modifyUserAge").val();
                        var userDate = $("#modifyUserDate").val();
                        var modify_tr = "<td><input type='checkbox'></td><td>" + userId +
                            "</td><td>" + userName + "</td><td>" + userGender + "</td><td>" + password + "</td><td>" + userAge + "</td><td>" +
                            userDate + "</td>";
                        /* 添加进去 */
                        if (userId == "" || userName == "" || password == "" || userAge == "" || userDate == ""){
                            alert("添加信息不完整，无法修改！");
                        }else {
                            /* 先清空信息 */
                            modify_td.empty();
                            /* 提交信息 */
                            modify_td.append(modify_tr);
                            /* 隐藏模态框，并对模态框表单进行清空 */
                            $("#modifyModal").modal("hide");
                            $("#modifyForm")[0].reset();
                        }
                    });
                });
            }else if (count > 1){
                alert("每次只能编辑一条信息！");
            }else{
                alert("请选择要编辑的员工信息！");
            }
        });

        /* 查询用户 */
        $("#btn-select").click(function () {
            /* 遍历表格中的每一行 */
            var select_tr = "";
            $("#userTbody").children("tr").each(function () {
                /* 判断每一行的id是否和要查询的id相同 */
                if (($(this).children("td:eq(1)").text()) === ($("#selectById").val())){
                    /* 只显示查询的用户 */
                    select_tr = "<tr class='info'>" + $(this).html() +  "</tr>";
                    return false;
                }else if (($(this).children("td:eq(2)").text()) === ($("#selectByUserName").val())){
                    /* 只显示查询的用户 */
                    select_tr += "<tr class='info'>" + $(this).html() +  "</tr>";
                }
            });
            /* 显示模态框 */
            $("#selectModal").modal("toggle");
            $("#selectUserTbody").append(select_tr);

            /* 清空查询模态框中的数据 */
            $("#btn-selectCertain").click(function () {
                $("#selectUserTbody").empty();
            });
        });
    </script>
</body>
</html>